import { Component, input, output, computed } from '@angular/core';
import { SheQu } from '../../models/shequ.model';
import { MyPaginatorComponent } from '../../my-paginator/my-paginator.component';

@Component({
  selector: 'app-defer-load-table',
  imports: [],
  templateUrl: './defer-load-table.component.html',
  styleUrl: './defer-load-table.component.css'
})
export class DeferLoadTableComponent {
  paginator = input<MyPaginatorComponent>();
  dataSource = input.required<SheQu[]>();
  onEdit = output<SheQu>();
  onDelete = output<SheQu>();

  currentPageData = computed<SheQu[]>(() => {
    if (!this.dataSource()) return [];
    if (!this.paginator()) return this.dataSource();
    const start = this.paginator()!.currentPageIndex() * this.paginator()!.currentPageSize;
    const end = start + this.paginator()!.currentPageSize;
    console.log("currentPageData trigger");
    return this.dataSource().slice(start, end);
  });

  currentPageDataStartIndex = computed<number>(() => {
    if (!this.paginator()) return 0;
    return this.paginator()!.currentPageIndex() * this.paginator()!.currentPageSize;
  });
}
